<template>
  <div id="mine" v-if="userInfo.token">
      <van-nav-bar
              title="我的"
              :fixed=true
              :border=false
      ></van-nav-bar>

      <van-cell-group style="margin-top: 2.6rem">
          <van-cell
                  is-link
                  style="background-color: #3bba63;color: #fff"
                  label-class="labelClass"
                  is-link
                  :center=true
                  @click="$router.push({name:'UserCenter'})"
          >
              <template slot="title">
                  <div class="personMsg">
                      <img :src="userInfo.icon_url" alt="">
                      <div class="personInfo">
                          <span>{{userInfo.real_name}}</span>
                          <span>手机号:{{userInfo.phone}}</span>
                      </div>
                  </div>
              </template>
          </van-cell>
      </van-cell-group>

      <van-cell-group>
          <van-cell
                  title="我的订单"
                  value="查看所有订单"
                  is-link icon="label"
                  @click="$router.push({path:'/dashboard/mine/MyOrder'})"
          >
          </van-cell>
          <router-link tag="div" :to="{path:'/dashboard/mine/MyOrder'}">
              <van-grid :column-num="4">
                  <van-grid-item
                          v-for="(order,index) in orderData"
                          :key="index"
                          :icon="order.icon"
                          :text="order.title"
                  ></van-grid-item>
              </van-grid>
          </router-link>
      </van-cell-group>

      <van-cell-group style="margin-top: 0.6rem">
          <van-cell title="我的优惠券" value="1张" is-link icon="gold-coin"></van-cell>
          <van-cell title="我的收货地址"  is-link icon="todo-list"></van-cell>
      </van-cell-group>

      <van-cell-group style="margin-top: 0.6rem">
          <van-cell title="联系客服" value="客服时间07:00-22:00" is-link icon="phone"></van-cell>
          <van-cell title="意见反馈"  is-link icon="smile-comment"></van-cell>
      </van-cell-group>

      <van-cell-group style="margin-top: 0.6rem">
          <van-cell title="春城商城" value="下载APP体验更佳" is-link icon="gift-card"></van-cell>
      </van-cell-group>

      <!--路由出口-->
      <transition name="router-slier" mode="out-in">
          <router-view></router-view>
      </transition>
  </div>
    <SelectLogin v-else></SelectLogin>
</template>

<script>
    import SelectLogin from './../../views/login/SelectLogin'
    import {mapState} from 'vuex'
    export default {
        name:"Mine",
        components:{
            SelectLogin
        },
        computed:{
            ...mapState(['userInfo'])
        },
        data(){
            return {
                orderData:[
                    {
                        icon:'pending-payment',
                        title:'待支付'
                    },
                    {
                        icon:'paid',
                        title:'待收货'
                    },
                    {
                        icon:'chat-o',
                        title:'待评价'
                    },
                    {
                        icon:'cash-back-record',
                        title:'售后/退款'
                    },
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
    #mine{
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
    }
    .van-nav-bar{
        background-color: #3bba63;
    }
    .van-nav-bar__title{
        color: #fff;
        font-size: 1rem;
    }
    .personMsg{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .personMsg > img {
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        border: 0.12rem solid #fff;
    }
    .personInfo {
        display: flex;
        flex-direction: column;
        margin-left: 0.8rem;
    }
    .van-cell__left-icon{
        color: orange;
        font-size: 1.2rem;
    }

    .router-slier-enter-active, .router-slier-leave-active{
        transition: all 0.3s;
    }

    .router-slier-enter, .router-slier-leave{
        transform: translate3d(2rem,0,0);
        opacity: 0;
    }
</style>